<template>
  <div class="Identity-verification">
    <section class="upload-card">
      <h2>Upload the front side of your document</h2>
      <pictureUpload :option="optionUpload1" @httpRequest="httpRequest"/>
      <div class="front-side"></div>
      <h2>Upload the front side of your document</h2>
      <p>* You must write note specifies “ANTEQUE KYC”</p>
      <p>“current date” and your “Signature”on the photo</p>
      <p>of you holding the document</p>
      <pictureUpload :option="optionUpload2" @httpRequest="httpRequest"/>
      <div class="front-side"></div>
    </section>
    <section class="upload-warning">
      <h2>Warning</h2>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img src alt />
            <i class="el-icon-circle-check"></i>
            <span>Standard</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img src alt />
            <i class="el-icon-circle-close"></i>
            <span>Fuzzy</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img src alt />
            <i class="el-icon-circle-close"></i>
            <span>Frame lost</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img src alt />
            <i class="el-icon-circle-close"></i>
            <span>Overexposure</span>
          </div>
        </el-col>
      </el-row>
      <h2>Upload Requirements</h2>
      <p>1. The identical information must be clear</p>
      <p>2. The photo must not be altered before uploading</p>
      <p>3. Support jpg/jpeg/png format</p>
      <el-button type="warning" @click="submitNext">SUBMIT</el-button>
    </section>
  </div>
</template>
<script>
import { imageUpload1, imageUpload2 } from "@/api/kycAttest";
import pictureUpload from "@/components/upload/index.vue";
export default {
  data() {
    return {
      optionUpload1: {
        data: {
          type: "image1",
        },
        title: "Upload the front-side of your ID card"
      },
      optionUpload2: {
        data: {
          type: "image2",
        },
        title: "Upload the hand-held ID card, Personal signature and Disclaimer handwriting"
      }
    };
  },
  components: {
    pictureUpload
  },
  methods: {
    /**
     * [httpRequest description]
     * 上传图片
     * --------------------------
     * @Author   LLP
     * @DateTime 2019-12-26T15:47:41+0800
     * @param    {[type]}                 res [description]
     * @return   {[type]}                     [description]
     */
    async httpRequest(res) {
      if (res.data.type === "image1") {
        let param = new FormData()
        param.append('doc1',res.file)
        let { data } = imageUpload1(param)
        console.log(data, 'image1')
        if (data === undefined) {
          this.$message({
            message: 'Upload ID card positive success.',
            type: 'success'
          })
        }
      } else {
        let param = new FormData()
        param.append('doc2',res.file)
        let { data } = imageUpload2(param)
        if (data === undefined) {
          this.$message({
            message: 'Upload succeeded.',
            type: 'success'
          })
        }
      }
    },
    submitNext() {
      this.$emit('submit')
    }
  }
};
</script>
<style lang="less" scoped>
.Identity-verification {
  .upload-card {
    text-align: center;
    h2 {
      font-size: 16px;
    }
    p {
      color: #b5bfd4;
      font-size: 12px;
      line-height: 18px;
    }
    .front-side {
      display: inline-block;
      padding: 15px;
      width: 250px;
      height: 170px;
      border: 1.5px dashed #faad47;
    }
  }
  .upload-warning {
    h2 {
      font-size: 16px;
    }
    p {
      color: #bbb2b7;
      font-size: 13px;
    }
    .el-button {
      width: 100%;
      margin-top: 45px;
    }
    .el-row {
      margin-bottom: 30px;
      .grid-content {
        display: inline-block;
        img {
          width: 120px;
          height: 90px;
          display: block;
          margin: 10px 0;
          border: 1px dashed #faad47;
        }
        .el-icon-circle-check {
          color: #70c075;
        }
        i {
          color: #ef5328;
          font-size: 16px;
          padding-right: 5px;
        }
      }
    }
  }
}
</style>